<template>
  <div class="containers">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>
<script>
  // 引入相关的依赖
  import BpmnModeler from 'bpmn-js/lib/Modeler';
  import { xmlStr } from '/src/mock/xmlStr.js';

  // 这里引入的是右侧属性栏这个框
  import propertiesPanelModule from 'bpmn-js-properties-panel';
  // 而这个引入的是右侧属性栏里的内容
  import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
  // 一个描述的json
  import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

  // 引入语言转换器
  import customTranslate from '/@/utils/customerTranslator.js';

  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'flow1',
    components: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 载入后, Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互
    mounted() {
      this.init();
    },
    data() {
      return {
        // bpmn建模器
        bpmnModeler: null,
        container: null,
        canvas: null,
      };
    },
    // 方法集合
    methods: {
      init() {
        // 获取到属性ref为“canvas”的dom节点
        const canvas = this.$refs.canvas;
        // 汉化
        const customTranslateModule={
          translate: [ 'value', customTranslate ]
        }
        // 建模
        this.bpmnModeler = new BpmnModeler({
          container: canvas,
          //添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel',
          },
          additionalModules: [propertiesPanelModule, propertiesProviderModule, customTranslateModule],
          moddleExtensions: {
            //如果要在属性面板中维护camunda：XXX属性，则需要此
            camunda: camundaModdleDescriptor,
          },
        });
        this.createNewDiagram();
      },
      createNewDiagram() {
        // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(xmlStr, (err) => {
          if (err) {
            // console.error(err)
          } else {
            // 这里是成功之后的回调, 可以在这里做一系列事情
            this.success();
          }
        });
      },
      success() {
        // console.log('创建成功!')
      },
    },
    // 计算属性
    computed: {},
  };
</script>

<style scoped>
  .containers {
    background-color: #ffffff;
    width: 100%;
    height: calc(100vh - 52px);
  }
  .canvas {
    width: 100%;
    height: 100%;
  }
  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
  }
</style>
